<template>
  <div>
    <Header></Header>
    <div id="main1">
      <el-container>
        <div class="menu">
          <div class="item" v-for="(val, key) in menu" :key='key'>
              <router-link :to="{name:'Index',query:{cate_id:key+1}}">{{val.cate_name}}</router-link>
          </div>
        </div>
        <el-main id="main">
            <div class="block">
              <el-carousel trigger="click" height="206px">
                <el-carousel-item v-for="(val, key) in img" :key="key">
                  <img style="width:508px;height: 206px;" :src='val.image_url' />
                </el-carousel-item>
              </el-carousel>
            </div>
          <div class="row" v-for="(val, key) in article" :key='key'>
            <div class="top">
              <router-link :to="{path:'article',query:{id:val.id}}"><h3>{{val.title}}</h3></router-link>
            </div>
            <div class="bottom">
              <router-link to="#" style="width:5%; margin-left: 5px;"><el-avatar size="small" :src= 'val.img_url'></el-avatar></router-link>
              <router-link to="#" style="width:10%; margin-left: 5px;">{{val.username}}</router-link>
              <span style="width: 50%;margin-left: 15px;color: #8A8A8A;">{{val['content']}}</span>
              <div style="width: 45%; text-align: right;">
                <router-link :to="{path:'/login',params: { userId: 123 }}" style="margin-left: 10px;" >
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
                    <path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"/>
                  </svg>
                  <span style="color: #3399ea;">12</span></router-link>
                <router-link to="#" style="margin-left:10px;" class="el-icon-view"><span style="color: #3399ea;">12</span></router-link>
                <router-link to="#" style="margin-left: 10px;" class="el-icon-chat-dot-square"><span style="color: #3399ea;">12</span></router-link>
              </div>
            </div>
          </div>
        </el-main>
        <el-aside width="300px">
        </el-aside>
      </el-container>
    </div>
   </div>
</template>

<script>
import Header from '@/components/Header'
export default {
  data () {
    return {
      article: {
      },
      menu: {
      },
      img: {
      }
    }
  },
  mounted () {
    var url = 'http://120.27.129.163/iblog/index.php/article'
    this.$http.get(url).then((backdata) => {
      var res = backdata.data
      if (res.code === 200) {
        this.article = res.data.article
        this.menu = res.data.cate
        this.img = res.data.rotation
      } else {
        this.$message({
          showClose: true,
          msg: res.msg,
          type: 'error'
        })
      }
    })
  },
  components: {
    Header
  }
}
</script>

<style>
  h3{
    margin: 0;
  }
  #main1 {
    margin: 0 auto;
    width: 60%;
    margin-top: 20px;
  }
  .el-aside {
    background-color: #FFFFFF;
    color: #333;
  }
  #left1 {
    position: fixed;
    left: 15%;
    text-align: center;
  }
  #main {
    color: #333;
    margin: 0 10px;
    padding: 0;
    background-color:#FFFFFF ;
  }
  .row {
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
  }
  .top {
    width: 100%;
    height: 50%;
    margin-bottom:10px;
  }
  .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 50%;
  }
  .row a {
    color: #3d3d3d;
    text-decoration: none;
  }
  .row a:hover {
    color: #fc5531;
  }
  .row:hover {
    background-color: #fafafa;
  }
  .el-menu-item{
    height: 32px ;
  }
  .menu{
    position: fixed;
    left: 14.7%;
    background-color: #FFFFFF;
    color: #333;
    width:92px ;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .item{
    text-align: center;
    width: 100%;
    color: #555666;
    border-radius: 25px;
    height: 40px;
    line-height: 40px;
  }
  .item a{
    color: #000000;
    text-decoration: none;
  }
  .item:hover{
    cursor: pointer;
    background-color: #f3f3f3;
    font-weight: bold;
  }
  .block{
    width:60%
  }
</style>
